<template>
  <div v-if="product.status != 0" style="min-height: 200px">
    <div class="thing-item item-column-3">
      <!---->
      <div class="img-view">
        <img :src="product.cover" />
      </div>
      <div class="info-view">
        <h3 class="thing-name">{{ product.title.substring(0, 12) }}</h3>
        <span>
          <span class="a-price-symbol">¥</span>
          <span class="a-price">{{ product.price }}</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  product: {
    type: Object,
    required: true,
  },
});


</script>

<style scoped>
.thing-item {
  min-width: 255px;
  max-width: 255px;
  position: relative;
  flex: 1;
  margin-right: 20px;
  height: fit-content;
  overflow: hidden;
  margin-top: 26px;
  margin-bottom: 36px;
  cursor: pointer;
}

.info-view {
  overflow: hidden;
  padding: 0 16px;
}
.thing-name {
  line-height: 32px;
  margin-top: 12px;
  color: #0f1111 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
}

.img-view {
  height: 200px;
  width: 255px;
}

.img-view > img {
  height: 200px;
  width: 186px;
  margin: 0 auto;
  background-size: contain;
  object-fit: contain;
}

.a-price-symbol {
  top: -0.5em;
  font-size: 12px;
}

.a-price {
  color: #0f1111;
  font-size: 21px;
}
</style>
